<template>
  <div id="content">
    <van-checkbox-group v-model="result"  v-for="(item,index) in orderList" :key = "index" class="aboutCheckbox">
      <van-checkbox :name="item.id">
        <van-card
          :num="item.num"
          :price="item.price"
          :desc="item.desc"
          :title="item.title"
          :thumb="item.thumbImg"
        >
          <div slot="tags">
            <van-tag plain type="danger">标签</van-tag>
            <van-tag plain type="danger">标签</van-tag>
          </div>
          <div slot="footer">
            <van-button size="mini">按钮</van-button>
            <van-button size="mini">按钮</van-button>
          </div>
        </van-card>
      </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar
      :price="price"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checked" @change="onChange">全选</van-checkbox>
      <span slot="tip">
        你的收货地址不支持同城送, <span>修改地址</span>
      </span>
    </van-submit-bar>
  </div>
</template>
<script>
import { Card, SubmitBar, Tag, Checkbox, Button, CheckboxGroup } from 'vant'
export default {
  name: 'card',
    data (){
      return {
        orderList:[
          {num: '1',price:'555',desc:'描述信息',title:'商品名称',thumbImg:'https://img.yzcdn.cn/vant/t-thirt.jpg',id:'1'},
          {num: '2',price:'666',desc:'描述信息',title:'商品名称',thumbImg:'https://img.yzcdn.cn/vant/t-thirt.jpg',id:'2'},
          {num: '3',price:'777',desc:'描述信息',title:'商品名称',thumbImg:'https://img.yzcdn.cn/vant/t-thirt.jpg',id:'3'},
          {num:'4',price:'888',desc:'描述信息',title:'商品名称',thumbImg:'https://img.yzcdn.cn/vant/t-thirt.jpg',id:'4'},
          {num:'5',price:'999',desc:'描述信息',title:'商品名称',thumbImg:'https://img.yzcdn.cn/vant/t-thirt.jpg',id:'5'},
          {num:'6',price:'1000',desc:'描述信息',title:'商品名称',thumbImg:'https://img.yzcdn.cn/vant/t-thirt.jpg',id:'6'},
        ],
        price: 32000,
        checked:false,
        result:[]
      }
   },
   components: {
     [Card.name]: Card,
     [SubmitBar.name] : SubmitBar,
     [Tag.name] : Tag,
     [Checkbox.name]: Checkbox,
     [Button.name]:Button,
     [CheckboxGroup.name]: CheckboxGroup
   },
  watch: {
      result (e) {
        let numAll = 0
        this.orderList.filter(item => this.result.includes(item.id)).forEach(val => {
          numAll += Number(val.price)
        })
       this.price = numAll * 100
      }
  },
  methods:{
    onSubmit (){
      console.log(123)
    },
    onChange (event){
      if(event){
       this.orderList.forEach( val =>{
         this.result.push(val.id)
        })
      }else
        this.result = []
    }
  }
 }
</script>
<style type="text/css">
  .van-checkbox__label{
    width: 100%;
  }
  .van-card{
    background-color: #fff;
  }
  .van-checkbox__icon{
    margin-left: 10px;
  }
  .aboutCheckbox>.van-checkbox{
    border-bottom: 1px solid #e4d6d6;
  }
</style>
